<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>


<input type="text" id="username" value="root"> <br/>
<input type="text" id="password" value="123456"> <br/>
<button id="submit">登陆</button>
<br/>
<button id="submit1">强制登陆</button>
<br/>

<input type="text" id="text">
<br/>
<button id="sendMsg">发送消息</button>
<br/>

<ul id="ul">

</ul>

<input type="hidden" id="token">
<script>

    let ul = document.getElementById("ul");
    let submit = document.getElementById("submit");
    submit.onclick = () => {

        let data = {
            username: document.getElementById("username").value,
            password: document.getElementById("password").value
        }

        $.ajax({
            url: 'http://127.0.0.1:8080/jsonLogin',
            type: "post",
            contentType: "application/json",
            data: JSON.stringify(data),
            dataType: "json",
            success: function (data) {
                if (data['code'] === 405) {
                    // 用户在线
                    sessionStorage.setItem('token', data['token']);
                } else {
                    if (data['token']) {
                        console.log("登陆成功")
                        // 登陆成功创建 socket
                        sessionStorage.setItem('token', data['token']);
                        websocket.create();
                    }
                }
                createLi(JSON.stringify(data))
            }
        });
    }

    document.getElementById('submit1').onclick = () => {
        $.ajax({
            url: 'http://127.0.0.1:8080/forciblyLogin',
            headers: {
                'Authorization_back': sessionStorage.getItem('token')
            },
            contentType: "application/json;charset=utf-8",
            type: "get",
            success: function (data) {
                createLi(JSON.stringify(data))
                sessionStorage.setItem('token', data['token']);
                websocket.create();
            }
        });
    }

    document.getElementById('sendMsg').onclick = () => {
        let text = document.getElementById("text").value;
        websocket.sendMsg(JSON.stringify(text));
    }

    let websocket = {
        ws: null,
        create: () => {
            console.log("创建Socket对象")
            this.ws = new WebSocket("ws://127.0.0.1:5555/ws");
            this.ws.onopen = (evt) => {  //绑定连接事件
                createLi('连接成功')
                console.log("Connection open ...");
                websocket.sendMsg();
            };
            this.ws.onmessage = (evt) => {//绑定收到消息事件
                let data = evt.data;
                let parse = JSON.parse(data);
                if (parse['code'] === -2) {
                    sessionStorage.removeItem('token')
                }
                createLi(data)
                console.log("Received Message: " + data);
            };
            this.ws.onclose = (evt) => { //绑定关闭或断开连接事件
                console.log("Connection closed.");
                createLi('连接关闭')
            };
        },
        sendMsg: (msg) => {
            let body = {
                userId: "",
                action: "subscribe",
                params: {
                    token: sessionStorage.getItem('token'),
                    msg
                }
            }
            this.ws.send(JSON.stringify(body));
        }
    }

    function createLi(data) {
        let li = document.createElement("li");
        li.innerText = data;
        ul.appendChild(li)
    }


</script>
</body>
</html>